<script setup lang="ts">
	import { theme } from '@/store/module/theme'
	import { ref, } from 'vue'
	import ScaleBackground from '@/components/ScaleBackground'


	const taskList = ref([
		[
			{
				icon: '/static/iconfont/user.png',
				title: '个人中心',
				url: '/pages/user/userinfo/userinfo'
			},
			{
				icon: '/static/iconfont/fengche.png',
				title: '账号设置',
				url: '/pages/user/accountSettings/accountSettings'
			},
			{
				icon: '/static/iconfont/wenzhang.png',
				title: '文章专栏',
				url: '/pages/user/accountSettings/accountSettings'
			}
		],
		[
			{
				icon: '/static/iconfont/lianxi.png',
				title: '联系我们',
				url: '/pages/user/contactUs/contactUs'
			},
		],
		[
			{
				icon: '/static/iconfont/shezhi.png',
				title: '设置',
				url: '/pages/setting/index/index'
			},
		]
	])
</script>

<template>
	<view :class="theme()" class="w-full min-h-[100vh]" :style="{background:'var(--Gradient-color)'}">
		<!-- bg image -->
		<ScaleBackground
			url='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F3ea167ef-8f98-401d-b1e1-173e4d2e06cf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708069477&t=f4131edd96910c01bc27b5772e1949b3' />
		<!-- info -->
		<view
			class="w-full h-auto info_box bg-[transparent] py-[30rpx]  z-[10]  -translate-y-[40rpx] rounded-[30rpx_30rpx_0_0]">
			<view class="w-full h-[160rpx] flex items-center">
				<view
					class="head_img w-[160rpx] h-[160rpx] ml-[60rpx] mr-[40rpx] -translate-y-[80rpx] overflow-hidden rounded-full ">
					<image
						src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc5f6153c-589f-4b46-a371-705652eeb8ec%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707988800&t=f31af2fe85d5b4be4a23c06721935851"
						class="w-full h-full " mode=""></image>
				</view>
				<view class=" w-[calc(100%-260rpx)]">
					<view class="text-[22px] font-bold text-[var(--text-color)]">
						linhan
					</view>
					<view class="text-[14px] text-[var(--text-color)] truncate">
						不做圣经里腐朽的诗篇，我要做禁书里最华丽的那一章
					</view>
				</view>
			</view>

			<!-- list -->
			<view class="list_cell">
				<u-cell-group class="mt-[20rpx] bg-[var(--bg-color)]" v-for="(i,idx) in taskList" :key="idx">
					<template v-for="(item,index) in i " :key="index">
						<u-cell :title="item.title" clickable :rightIconStyle="{
							color:'var(--text-color)'
						}" :titleStyle="{color:'var(--text-color)'
							
						}" arrow-direction="right" isLink :url="item.url">
							<template #icon>
								<image :src="item.icon" class="w-[40rpx] h-[40rpx] mr-[20rpx]" mode=""></image>
							</template>
						</u-cell>
					</template>
				</u-cell-group>
			</view>
		</view>
	</view>
</template>